
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
	  <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.3.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
      <script>
      var stage, layer, imageObj, image, firstName;
      </script>
    <script>
      window.onload = function() {
        stage = new Kinetic.Stage({
          container: "container",
          width: 1125,
          height: 750
		  });
		 layer = new Kinetic.Layer();

         imageObj = new Image();
	    imageObj.onload = function() {
	     image = new Kinetic.Image({
	        image: imageObj,
	        width: 1125,
	        height: 750
	       });
		
		
         firstName = new Kinetic.Text({
          x: stage.getWidth() / 2 - 500,
          y: stage.getHeight() / 2 - 100,
          text: "First Name",
          fontSize: 100,
          fontFamily: "Calibri",
          textFill: "black",
		  draggable: true
        });
		
         lastName = new Kinetic.Text({
             x: stage.getWidth() / 2 - 500,
             y: stage.getHeight() / 2 + 50,
             text: "Last Name",
             fontSize: 100,
             fontFamily: "Calibri",
             textFill: "black",
   		  draggable: true
           });
   		
         designation = new Kinetic.Text({
             x: stage.getWidth() / 2 - 500,
             y: stage.getHeight() / 2 + 200,
             text: "Developer",
             fontSize: 65,
             fontFamily: "Calibri",
             textFill: "black",
   		  draggable: true
           });
   		
        $("#fNamex").val(firstName.getX());
		 // add cursor styling
        firstName.on("mouseover", function() {
        	
          document.body.style.cursor = "pointer";
        });
        firstName.on("mouseout", function() {
        	
          document.body.style.cursor = "default";
        });

        firstName.on('dragend', function(evt) {
        	$("#fNamex").val(firstName.getX());
        	$("#fNamey").val(firstName.getY());
          });
        lastName.on("mouseover", function() {
        	
            document.body.style.cursor = "pointer";
          });
          lastName.on("mouseout", function() {
          	
            document.body.style.cursor = "default";
          });

         lastName.on('dragend', function(evt) {
          	$("#lNamex").val(lastName.getX());
          	$("#lNamey").val(lastName.getY());
            });
          designation.on("mouseover", function() {
          	
              document.body.style.cursor = "pointer";
            });
            designation.on("mouseout", function() {
            	
              document.body.style.cursor = "default";
            });

            designation.on('dragend', function(evt) {
            	$("#desigx").val(designation.getX());
            	$("#desigy").val(designation.getY());
              });
          
        // add the shape to the layer
        layer.add(image);
        layer.add(firstName);
        layer.add(lastName);
        layer.add(designation);

        // add the layer to the stage
        stage.add(layer);
		//document.getElementById("namex").nodeValue = "Hello Kar";
	    };
        imageObj.src = "resources/images/tedxssnattedee.jpg";
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
    <p>
	First Name	<input id="fName" type="text" placeholder="First Name" onkeyup='firstName.setText($("#fName").val()); layer.draw();'"/>
	X Location <input id="fNamex" type="text" />
	Y Location <input id="fNamey" type="text"/>
	Font Size <input id="fNamesize" type="range" min="0" max="200" value="10" onchange='firstName.setFontSize($("#fNamesize").val()); layer.draw();'/>
	</p>
	
	<p>
	Last Name	<input id="lName" type="text" placeholder="Last Name" onkeyup='lastName.setText($("#lName").val())'"/>
	X Location <input id="lNamex" type="text" />
	Y Location <input id="lNamey" type="text"/>
	Font Size <input id="lNamesize" type="range" min="0" max="200" value="10" onchange='lastName.setFontSize($("#lNamesize").val()); layer.draw();'/>
	</p>
	<p>
	Designation	<input id="designation" type="text" placeholder="Developer" onkeyup='desgnation.setText($("#fName").val())'"/>
	X Location <input id="desigx" type="text" />
	Y Location <input id="desigy" type="text"/>
	Font Size <input id="desigsize" type="range" min="0" max="200" value="10" onchange="designation.setFontSize($('#desigsize').val()); layer.draw();"/>
	</p>
	
	<button id="save" onclick='stage.toDataURL(function(dataUrl) { window.open(dataUrl);});'>Save as Image</button>
    
  </body>
</html>

